<template>
    <div>
        <Header></Header>
        <div class="m-blog">
            <h2>{{blog.title}}</h2>
            <el-button type="primary" icon="el-icon-edit" plain v-if="ownBlog">
                <router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}" class="rl-pretty">
                    编辑
                </router-link>
            </el-button>
            <el-button type="danger" icon="el-icon-delete" plain v-if="ownBlog" @click="deleteBlog">
                删除
            </el-button>
            <el-divider></el-divider>
            <div class="markdown-body" v-html="blog.content"></div>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header"
    import 'mavon-editor/dist/markdown/github-markdown.min.css'

    export default {
        name: "BlogDetail",
        components: {Header},
        data() {
            return {
                blog: {
                    id: '',
                    userId: null,
                    title: '',
                    description: '',
                    content: ''
                },
                ownBlog: false
            }
        },
        methods: {
            deleteBlog() {
                const blogId = this.$route.params.blogId
                if (blogId) {
                    this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$axios.post("/blog/delete/" + blogId, null, {
                            headers: {
                                "Authorization": localStorage.getItem("token")
                            }
                        }).then(res => {
                            this.$message({
                                type: 'success',
                                message: res.data.data
                            });
                            this.$router.push("/blogs")
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            }
        },
        created() {
            const blogId = this.$route.params.blogId
            console.log(blogId)
            const _this = this
            if (blogId) {
                this.$axios.get("/blog/detail/" + blogId).then(res => {
                    // console.log(res)
                    const blog = res.data.data
                    _this.blog.id = blog.id
                    _this.blog.userId = blog.userId
                    _this.blog.title = blog.title
                    _this.blog.description = blog.description
                    // MarkdownIt 渲染内容
                    let MarkdownIt = require("markdown-it")
                    let md = new MarkdownIt();
                    _this.blog.content = md.render(blog.content)
                    // 判断是否是自己的文章，能否编辑
                    if (_this.$store.getters.getUserInfo === null) {
                    } else {
                        _this.ownBlog = (_this.blog.userId === _this.$store.getters.getUserInfo.id)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .m-blog {
        margin-top: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        width: 100%;
        min-height: 700px;
        padding: 10px;
    }

    .markdown-body {
        background: white;
        color: black;
    }

    .rl-pretty {
        text-decoration: none;
        color: skyblue;
    }
</style>